<template>
	<view class="order-summary">
		<!-- 商品信息 -->
		<view class="product-row">
			<text class="product-name">{{ truncatedName }}</text>
			<text class="product-quantity">× {{ quantity }}</text>
		</view>

		<!-- 价格信息 -->
		<view class="price-row">
			<text class="price-item">
				<text class="label">订单金额：</text>
				<text class="value">¥{{ formatPrice(row.orderPrice) }}</text>
			</text>
			<text class="price-separator">|</text>
			<text class="price-item">
				<text class="label">实付金额：</text>
				<text class="value highlighted">¥{{ formatPrice(row.actualPrice) }}</text>
			</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
	row: any;
}>();

// 截取商品名前两段（如品牌+型号）
const getStr = (str: string) => {
	if (!str) return '';
	return str.split(' ').slice(0, 2).join(' ');
};

// 处理商品名称
const truncatedName = computed(() => getStr(props.row.productName));

// 获取商品数量（安全访问）
const quantity = computed(() => {
	const collection = props.row.productCollection;
	return collection?.[0]?.totalUnitNum || collection?.[0]?.num || 0;
});

// 格式化价格显示
const formatPrice = (price: string | number) => {
	const num = parseFloat(String(price)) || 0;
	return num.toFixed(2);
};
</script>

<style scoped>
.order-summary {
	font-size: 26rpx;
	color: #333;
	line-height: 1.5;
}

/* 商品行：名称 + 数量 */
.product-row {
	display: flex;
	align-items: baseline;
	margin-bottom: 8rpx;
	font-weight: 500;
}

.product-name {
	font-size: 28rpx;
	color: #1a1a1a;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-quantity {
	font-size: 26rpx;
	color: #666;
	margin-left: 8rpx;
	flex-shrink: 0;
}

/* 价格行：订单金额 | 实付金额 */
.price-row {
	display: flex;
	align-items: center;
	color: #666;
	font-size: 24rpx;
}

.price-item {
	display: flex;
	align-items: center;
}

.label {
	color: #999;
}

.value {
	color: #e64340;
	font-weight: 500;
}

.highlighted {
	color: #d43939;
}

.price-separator {
	margin: 0 12rpx;
	color: #ddd;
}
</style>
